<template>
  <div class="statistics">
    <el-row :gutter="10">
      <template v-for="item in dataArr" :key="item.titleB">
        <el-col :span="8" :xs="24" :sm="12" :md="8"
          ><Panel :panelData="item"></Panel
        ></el-col>
      </template>
    </el-row>

    <Card title="全国疫情数据信息">
      <MyEchart :options="options"></MyEchart>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import Card from '@/baseUI/card'
import MyEchart from '@/baseUI/echart'
import { useYQData } from '@/store/YQStore'
import Panel from './statistical-panel.vue'
const YQdata = useYQData()
const mapArrays = YQdata.mapArrays
const options = computed(() => {
  return {
    title: {
      // 标题内容
      text: '确诊疫情图'
    },
    series: [
      {
        name: '确诊人数',
        type: 'map',
        // 告诉echarts渲染一个地图
        map: 'china',
        // 告诉echarts渲染中国地图
        label: {
          // 设置地区汉字
          show: true,
          color: '#333',
          fontSize: 10
        },
        itemStyle: {
          // 地图区域样式
          areaColor: '#eee'
        },
        roam: true,
        // 鼠标滚轮效果
        zoom: 1.2,
        // 地图放大缩小
        emphasis: {
          // 鼠标经过地图和字体样式
          label: {
            color: '#fff',
            fontSize: 12
          },
          itemStyle: {
            areaColor: '#ccc'
          }
        },
        data: mapArrays
        // 展示后台给的数据，必须格式（name:xxx;value:xxx）
      }
    ],
    visualMap: [
      {
        // 区域显示颜色
        type: 'piecewise',
        show: true,
        // splitNumber: 4
        pieces: [
          { min: 10000 },
          { min: 1000, max: 9999 },
          { min: 100, max: 999 },
          { min: 10, max: 99 },
          { min: 1, max: 9 },
          { max: 0 }
        ],
        inRange: {
          // 区域图标样式
          symbol: 'rect',
          color: [
            '#FFFFFF',
            '#FFAA85',
            '#FF7B69',
            '#CC2929',
            '#8C0D0D',
            '#660208'
          ]
        }
      }
    ],
    tooltip: {
      // 鼠标放上去显示内容
      trigger: 'item'
    },
    toolbox: {
      // 下载
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center',
      feature: {
        dataView: { readyOnly: false },
        restore: {},
        saveAsImage: {}
      }
    }
  }
})
const dataArr = YQdata.dataArr
console.log(dataArr)
</script>
<style scoped lang="less"></style>
